<template>
  <div @keydown.right="handleMoveRight" class="container"
       :style="{width: `${vars.containerWidth}px`, height: `${vars.containerHeight}px`}">
    <div ref="ball" class="ball"
         :style="{left: `${p.x}px`, top: `${p.y}px`, width: `${vars.ballRadius*2}px`, height: `${vars.ballRadius*2}px`}"></div>
    <div ref="board" class="board"
         :style="{width: `${vars.boardWidth}px`, height: `${vars.boardHeight}px`, left: `${board.x}px`}"></div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator"


@Component
export default class Game extends Vue {
  $refs!: {
    ball: HTMLDivElement,
    board: HTMLDivElement
  }

  vars = {
    containerWidth: 400,
    containerHeight: 450,
    ballRadius: 10,
    boardWidth: 80,
    boardHeight: 10
  }

  timer!: number
  boardTimer!: number
  boardAddVTimer!: number

  // ball v
  v = {
    x: 1,
    y: 2
  }

  // ball p
  p = {
    x: 10,
    y: 10,
  }


  // board p
  board = {
    x: 0
  }

  // ball v
  boardV = {
    x: 0
  }

  addV = (): void => {
    this.v.y = 1.05 * this.v.y
    this.v.x = 1.05 * this.v.x
  }

  mounted(): void {
    this.boardTimer = setInterval(() => {
      this.board.x = this.board.x + this.boardV.x
      console.log(this.boardV.x)
    }, 2)
    this.timer = setInterval(() => {
      const {x: vx, y: vy} = this.v
      const {x, y} = this.p
      this.p = {
        x: x + vx,
        y: y + vy,
      }
      const {offsetLeft: left, offsetTop: top} = this.$refs.ball
      const vars = this.vars
      if ((this.p.x - vars.ballRadius) <= 0) {
        this.v.x = -this.v.x
      }
      if ((this.p.y - vars.ballRadius) <= 0) {
        this.v.y = -this.v.y
        this.addV()
      }
      if ((this.p.x + vars.ballRadius) >= vars.containerWidth) {
        this.v.x = -this.v.x

      }
      const checkCondition = this.p.y + vars.ballRadius >= vars.containerHeight - vars.boardHeight
      if (checkCondition) {
        const success = this.board.x < this.p.x && this.p.x - this.board.x <= vars.boardWidth
        if (success) {
          this.v.y = -this.v.y
          this.addV()
        } else {
          clearInterval(this.timer)
        }
      }
    }, 8)

    window.onkeydown = (ev: KeyboardEvent) => {
      if (ev.key === "ArrowRight") {
        this.handleMoveRight()
      }
      if (ev.key === "ArrowLeft") {
        this.handleMoveLeft()
      }
    }
    window.onkeyup = () => {
      clearInterval(this.boardAddVTimer)
      this.boardAddVTimer = null as any
      this.boardV.x = 0
    }
  }


  handleMoveRight(): void {
    if(!this.boardAddVTimer){
      this.boardV.x = 1
      this.boardAddVTimer = setInterval(() => {
        this.boardV.x += 0.005
      }, 1)
    }
  }

  handleMoveLeft(): void {
    if(!this.boardAddVTimer){
      this.boardV.x = -1
      this.boardAddVTimer = setInterval(() => {
        this.boardV.x -= 0.005
      }, 1)
    }
  }

}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 500px;
  height: 600px;
  background-color: skyblue;
  margin: 30px;
  position: relative;
  //overflow: hidden;

  .ball {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: royalblue;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .board {
    position: absolute;
    bottom: 0;
    background-color: orange;
    width: 50px;
    height: 10px;
  }
}
</style>
